<template>
  <div class="app-container">
    <el-form
      size="mini"
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="流程标识" prop="processKey">
        <el-input
          v-model="queryParams.processKey"
          placeholder="请输入流程标识"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流程名称" prop="processName">
        <el-input
          v-model="queryParams.processName"
          placeholder="请输入流程名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="流程分类" prop="category">
        <el-select
          v-model="queryParams.category"
          clearable
          placeholder="请选择"
          size="small"
        >
          <el-option
            v-for="item in categoryOptions"
            :key="item.categoryId"
            :label="item.categoryName"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="提交时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['workflow:process:ownExport']"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <div class="tp_box">
      <el-table
        v-loading="loading"
        :data="ownProcessList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="流程编号"
          align="center"
          prop="procInsId"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="流程名称"
          align="center"
          prop="procDefName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="流程类别"
          align="center"
          prop="category"
          :formatter="categoryFormat"
        />
        <el-table-column label="流程版本" align="center" width="80px">
          <template slot-scope="scope">
            <el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="当前节点" align="center" prop="taskName" />
        <el-table-column
          label="提交时间"
          align="center"
          prop="createTime"
          width="180"
        />
        <el-table-column label="流程状态" align="center" width="100">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.wf_process_status"
              :value="scope.row.processStatus"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="耗时"
          align="center"
          prop="duration"
          width="180"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-tickets"
              @click="handleFlowRecord(scope.row)"
              v-hasPermi="['workflow:process:query']"
              >详情</el-button
            >
            <!-- <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-if="scope.row.finishTime"
              v-hasPermi="['workflow:process:remove']"
              >删除</el-button
            > -->
            <el-button
              type="text"
              size="mini"
              icon="el-icon-circle-close"
              @click="handleStop(scope.row)"
              v-hasPermi="['workflow:process:cancel']"
              >取消</el-button
            >
            <el-button
              type="text"
              size="mini"
              icon="el-icon-refresh-right"
              v-hasPermi="['workflow:process:start']"
              @click="handleAgain(scope.row)"
              >重新发起</el-button
            >
            <el-button
              type="text"
              size="mini"
              icon="el-icon-notebook-2"
              @click="addKnowledge(scope.row)"
              v-if="scope.row.processStatus == 'completed'"
              >转为问题工单</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog title="转问题工单" :visible.sync="dialogFormVisible">
      <el-form :model="KnowledgeForm" label-width="100px">
        <el-form-item label="问题流程">
          <el-select
            v-model="KnowledgeForm.deploymentId"
            placeholder="请选择问题流程"
            @change="changeKnowledge"
          >
            <el-option
              :label="item.processName"
              :value="item.deploymentId"
              v-for="item in KnowledgeData"
              :key="item.deploymentId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div v-if="formOpen">
        <parser
          :key="new Date().getTime()"
          :form-conf="formData"
          @submit="submit"
          ref="parser"
          @getData="getData"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOwnProcess,
  stopProcess,
  delProcess,
  listProcess, //新建流程数据
  startProcess, //发起流程
  getProcessForm, //获取动态表单
} from "@/api/workflow/process";
import { listAllCategory } from "@/api/workflow/category";
import Parser from "@/utils/generator/parser";
export default {
  dicts: ["wf_process_status"],
  components: {
    Parser,
  },
  data() {
    return {
      //问题表单
      KnowledgeForm: {
        deploymentId: null,
      },
      //控制问题弹窗
      dialogFormVisible: false,
      //问题数据
      KnowledgeData: [],
      //这两个是动态获取表单的数据
      formOpen: false,
      formData: {},
      definitionId: null,
      //要添加到知识库的数据
      rowData: {},

      // 遮罩层
      loading: true,
      processLoading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      categoryOptions: [],
      processTotal: 0,
      // 我发起的流程列表数据
      ownProcessList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      src: "",
      definitionList: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        processKey: undefined,
        processName: undefined,
        category: "SJGL",
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getCategoryList();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getList();
    });
  },
  methods: {
    //转问题工单
    addKnowledge(row) {
      this.rowData = row;
      listProcess({ pageNum: 1, pageSize: 100, category: "WTGL" }).then(
        (response) => {
          this.KnowledgeData = response.rows;
          this.dialogFormVisible = true;
        }
      );
      //拿这条数据的表单内容
      getProcessForm({
        deployId: this.rowData.deployId,
        definitionId: this.rowData.procDefId,
        procInsId: this.rowData.procInsId,
      }).then((res) => {
        if (res.data) {
          res.data.fields.forEach((item) => {
            switch (item.__config__.label) {
              case "问题名称":
                this.rowData.questionName = item.__config__.defaultValue;
                break;
              case "问题描述":
                this.rowData.questionDes = item.__config__.defaultValue;
                break;
            }
          });
        }
      });
    },
    //切换选中的知识库
    changeKnowledge() {
      const checked_Knowledge = this.KnowledgeData.find(
        (item) => item.deploymentId == this.KnowledgeForm.deploymentId
      );
      this.initData(checked_Knowledge);
    },
    //获取表单
    initData(data) {
      this.definitionId = data.definitionId;
      getProcessForm({
        deployId: data.deploymentId,
        definitionId: data.definitionId,
      }).then((res) => {
        if (res.data) {
          res.data.fields.forEach((item) => {
            switch (item.__config__.label) {
              case "问题名称":
                item.__config__.defaultValue = this.rowData.questionName;
                break;
              case "问题描述":
                item.__config__.defaultValue = this.rowData.questionDes;
                break;
              case "来源工单ID":
                item.__config__.defaultValue = this.rowData.procInsId;
                break;
              case "来源类型":
                item.__config__.defaultValue = "事件工单";
                break;
            }
          });
          // res.data.fields[0].__config__.defaultValue =
          //   this.rowData.questionName;
          // res.data.fields[1].__config__.defaultValue = this.rowData.questionDes;
          // res.data.fields[2].__config__.defaultValue = this.rowData.procInsId;
          // res.data.fields[3].__config__.defaultValue = "事件工单";
          this.formData = res.data;
          this.formOpen = true;
        }
      });
    },
    //提交表单
    submit(data) {
      if (data && this.definitionId) {
        // 启动流程并将表单数据加入流程变量
        startProcess(this.definitionId, JSON.stringify(data.valData)).then(
          (res) => {
            this.$modal.msgSuccess(res.msg);
            this.$tab.closeOpenPage({
              path: "/centralized/issues_management",
            });
          }
        );
      }
    },
    /** 查询流程分类列表 */
    getCategoryList() {
      listAllCategory().then(
        (response) => (this.categoryOptions = response.data)
      );
    },
    /** 查询流程定义列表 */
    getList() {
      this.queryParams.category = "SJGL";
      this.loading = true;
      listOwnProcess(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.ownProcessList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        category: null,
        key: null,
        tenantId: null,
        deployTime: null,
        derivedFrom: null,
        derivedFromRoot: null,
        parentDeploymentId: null,
        engineVersion: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.procInsId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handleAgain(row) {
      this.$router.push({
        path: "/workflow/process/start/" + row.deployId,
        query: {
          definitionId: row.procDefId,
          procInsId: row.procInsId,
        },
      });
      console.log(row);
    },
    /**  取消流程申请 */
    handleStop(row) {
      const params = {
        procInsId: row.procInsId,
      };
      stopProcess(params).then((res) => {
        this.$modal.msgSuccess(res.msg);
        this.getList();
      });
    },
    /** 流程流转记录 */
    handleFlowRecord(row) {
      this.$router.push({
        path: "/workflow/process/detail/" + row.procInsId,
        query: {
          processed: false,
        },
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.procInsId || this.ids;
      this.$confirm(
        '是否确认删除流程定义编号为"' + ids + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delProcess(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "workflow/process/ownExport",
        {
          ...this.queryParams,
        },
        `wf_own_process_${new Date().getTime()}.xlsx`
      );
    },
    categoryFormat(row, column) {
      return (
        this.categoryOptions.find((k) => k.code === row.category)
          ?.categoryName ?? ""
      );
    },
  },
};
</script>
